<template>
  <div>
    <el-button style="margin-bottom: 4px" @click="open">选择api</el-button>
    <el-descriptions style="overflow: auto" border :column="2" v-if="Object.keys(apiObj).length">
      <el-descriptions-item label="接口名称" :span="1">{{ apiObj.apiName }}</el-descriptions-item>
      <el-descriptions-item label="接口id" :span="1">{{ apiObj.apiId }}</el-descriptions-item>
      <el-descriptions-item label="请求路径" :span="2">{{ apiObj.apiUrl }}</el-descriptions-item>
      <!-- <el-descriptions-item label="接口编码">{{apiObj.apiCode}}</el-descriptions-item> -->
    </el-descriptions>
    <rest-api-dialog v-model="showDialog" @submit="getApi" />
  </div>
</template>

<script>
import restApiDialog from '@/platform/conn/views/conn/api/restApiDialog.vue';
import { searchAllByEntity } from '@/api/conn/api/index.js';

export default {
  name: 'ApiSelector',
  components: { restApiDialog },
  props: {
    modelValue: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      apiId: '',
      showDialog: false,
      apiObj: {}
    };
  },
  watch: {
    modelValue: {
      handler(val) {
        this.apiId = val;
        if (this.apiId && !Object.keys(this.apiObj).length) {
          searchAllByEntity(this.apiId).then((res) => {
            if (res.code == '200') {
              this.apiObj = res.data[0];
            }
          });
        }
      },
      immediate: true
    },
    apiId(val) {
      this.$emit('update:modelValue', val);
    }
  },
  methods: {
    open() {
      this.showDialog = true;
    },
    getApi(data) {
      this.apiObj = data;
      this.apiId = data.apiId;
      this.$emit('update', this.apiObj);
    }
  }
};
</script>
